<template>
    <div>
        <div v-for="(l, lIndex) in LIFEs" :key="lIndex" style="margin: 20px;" @click="showTicket(l)">
            <el-card class="ticket-card" shadow="hover" >
                <el-row>
                    <el-col :span="12">
                        <img src="https://shadow.elemecdn.com/app/element/hamburger.9cf7b091-55e9-11e9-a976-7f4d0b07eef6.png" class="image">
                    </el-col>
                    <el-col :span="12">
                        <h3>{{l.title}}</h3>
                        主办方：{{l.organizer_name}}<br>
                        时间：{{l.start_time}} 至 {{l.end_time}}<br>
                        地点：{{l.location}}
                        <el-divider></el-divider>
                        <h3>NFT编号：{{l.LIFEId}}</h3>
                        票种名称：{{l.name}}<br>
                        描述：{{l.description}}
                        <h3 class="event-status">{{LIFEsStatus[lIndex]}}</h3>
                    </el-col>                    
                </el-row>
            </el-card>
        </div>
    </div>
</template>

<script>
import {mapGetters} from 'vuex';

export default {
    data() {
        return {
            LIFEs: [],
            LIFEsStatus: [],
        }
    },
    created() {
        this.getMyLIFEs();
    },
    computed: {
        ...mapGetters([
            'userId',
            'username',
            'address',
        ]),
    },
    methods: {
        getMyLIFEs() {
            this.api({
                url: "/ticketing/getLIFEsOfOwner",
                method: "post",
                data: {userId: this.userId}
            }).then(data => {
                this.LIFEs = data.info;
                for (let i = 0; i < this.LIFEs.length; i++) {
                    let now = Date.now();
                    let validBefore = new Date(this.LIFEs[i].validBefore).getTime();
                    let saleEndTime = new Date(this.LIFEs[i].saleEndTime).getTime();
                    let transferEndTime = new Date(this.LIFEs[i].transferEndTime).getTime();
                    if (this.LIFEs[i].used) {
                        this.LIFEsStatus[i] = '已使用';
                    } else if (now >= validBefore) { // && not used 
                        this.LIFEsStatus[i] = '未使用';
                    } else if (this.LIFEs[i].toBeAccepted && now < transferEndTime) { // && not used && before validBefore
                        this.LIFEsStatus[i] = '待被赠予人接收';
                    } else if (this.LIFEs[i].toBeResold && now < saleEndTime && now < transferEndTime) {
                        this.LIFEsStatus[i] = '待转售';
                    } else {
                        this.LIFEsStatus[i] = '待使用';
                    }
                }
            }).catch((err) => {
                console.log('err:',err)
                this.$message.error("获取票据失败")
            })
        },
        showTicket(LIFE) {
            this.$router.push({
                name: "ticket", 
                params: LIFE
            });        
        }
    },
}
</script>

<style scoped>
.ticket-card {
    cursor: pointer;
}

.event-status {
    font-size: 18px;
    color: #E6A23C;
}

</style>